<template>
	<view class="edit">
		<u-form :model="form" ref="uForm" style="padding: 20rpx;">
			<u-form-item label="标题" prop="name">
				<u-input type="textarea" v-model="form.name" :border="true" height="50" />
			</u-form-item >
			<u-form-item label="图片" prop="img">
				<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple :maxCount="9"></u-upload>
			</u-form-item >
			
			<u-form-item label="说说" prop="intro" >
				<u-input type="textarea" v-model="form.intro" :border="true" height="400" :autoHeight="true"/>
			</u-form-item>
		</u-form>
		<view class="">
			<!-- <button @click="submit" style="width: 500rpx; background-color: #0285ff;color: #FFFFFF; border-radius: 50rpx;">提交</button> -->
			<u-button size="medium" shape="circle" @click="submit" type="primary">提交</u-button>
		</view>
		
	</view>
	<u-toast ref="uToast" />
	<u-popup v-model="show1" :mask-close-able="false" mode="center" width="500" height="300" border-radius="20" style="text-align: center;">
		<view style="padding-top: 100rpx;padding-bottom: 20rpx;">登录才能分享喔！</view>
		<u-button @click="login" type="warning" size="mini">去登录</u-button>
	</u-popup>
	<u-tabbar :list="list1" active-color="#0285ff" ></u-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				// show1:true,
				value4: '',
				fileList4: [],
				list1: [],
				form: {
					name: '',
					img:"",
					intro: '',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '好标题可以吸引很多人诶！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							min: 5, 
							message: '简介少于5个字这也太少了吧！', 
							trigger: 'change'
						}
					]
				}
			}
		},
		computed: {
			show1(){
			  return !this.$store.state.userInfo.isLogin
			}
		  },
		methods: {
			login(){
				uni.switchTab({
					url: '/pages/mine/index'
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								// resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
							// url: '/pages/mine/orderlist/orderlist',
							duration:1000
						})
						// console.log('验证通过');
						
					} else {
						// console.log('验证失败');
					}
				});
			}
		},
		mounted() {
			
			uni.request({
			  url: "http://127.0.0.1:4523/m1/1653531-0-default/info",
			  success: (res) => {
				this.list1=res.data.data[0].list1
			  },
			  
			  fail: (err) => {
			    console.error(err,11111111111);
			  },
			});
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.edit{
		text-align: center;
		padding: 20rpx;
	}
</style>
